<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .banxin{
            width: 1200px;
            /* background-color: aquamarine; */
            /* text-align: center; */
            margin: auto;
            height: 600px;
            display: flex;
            align-items: center;

        }
        .left{
            width: 700px;
            /* background-color: blue; */
            height: 500px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;


        }
        .left.smallbox{
            display: flex;
            width: 150px;
            height: 100px;
    
            border: 1px solid black;
            
            /* background-color: coral; */
        }
        .smallbox{
            border: 1px solid black;
            margin-top: 10px;
        }
        img{
            width: 150px;
            
        }
        #che{
            text-align: center;
            display: block;
            background-color: red;
            color: aliceblue;
            width: 100px;
            margin-left: 20px;
        }
        span{
            margin-left: 10px;
        }
        .right{
            width: 400px;
            /* background-color: brown; */
            border: 1px solid black;
            height: 490px;
            margin-top: 10px;
        }
        button{
            width: 20px;
            height: 20px;
            
            
        }
        .right1{
            width: 400px;
            height: 100px;
            display: flex;
            /* background-color: coral; */
            text-align: center;
            justify-content: space-around;   
            align-items: center; 
            /* margin-bottom: 10px; */
        }
        
        .right1 img{
            width: 50px;
        }
        .right2 span{
            display: block;

        }
        p{
            margin: 0;
            padding: 0;

        }
    </style>
</head>
<body>
    <div class="banxin">   
    <div class="left">
        <!-- <div class="smallbox">
            <img src="./img/01.webp" alt=""><br>
            <span>高级办公椅</span><br>
            <span>10000</span><br>
            <span class="che">加入购物车</span><br>
        </div>
        <div class="smallbox">
            <img src="./img/01.webp" alt=""><br>
            <span>高级办公椅</span><br>
            <span>10000</span><br>
            <span>加入购物车</span><br>
        </div>
        <div class="smallbox">
            <img src="./img/01.webp" alt=""><br>
            <span>高级办公椅</span><br>
            <span>10000</span><br>
            <span>加入购物车</span><br>
        </div>
        <div class="smallbox">
            <img src="./img/01.webp" alt=""><br>
            <span>高级办公椅</span><br>
            <span>10000</span><br>
            <span>加入购物车</span><br>
        </div>
        <div class="smallbox">
            <img src="./img/01.webp" alt=""><br>
            <span>高级办公椅</span><br>
            <span>10000</span><br>
            <span>加入购物车</span><br>
        </div>
        <div class="smallbox">
            <img src="./img/01.webp" alt=""><br>
            <span>高级办公椅</span><br>
            <span>10000</span><br>
            <span>加入购物车</span><br>
        </div>
        <div class="smallbox">
            <img src="./img/01.webp" alt=""><br>
            <span>高级办公椅</span><br>
            <span>10000</span><br>
            <span>加入购物车</span><br>
        </div>
        <div class="smallbox">
            <img src="./img/01.webp" alt=""><br>
            <span>高级办公椅</span><br>
            <span>10000</span><br>
            <span>加入购物车</span><br>
        </div>
        <div class="smallbox">
            <img src="./img/01.webp" alt=""><br>
            <span>高级办公椅</span><br>
            <span>10000</span><br>
            <span>加入购物车</span><br>
        </div>
        <div class="smallbox">
            <img src="./img/01.webp" alt=""><br>
            <span>高级办公椅</span><br>
            <span>10000</span><br>
            <span class="che">加入购物车</span><br>
        </div> -->
        
    </div>
    <div class="right">
        <h2 class="shop">购物车()</h2>
        <!-- <div class="en">
            <div class="right1">
                <button></button>
                <div class="right2">
                    <img src="./img/01.webp" alt="">
                    <p>电动按摩椅</p></div>
                    <span>10</span>
                    <button>-</button>
                    <span>1</span>
                    <button>+</button>
                    <span>删除收藏</span>
            </div>
    
            <div class="right1">
                <button></button>
                <div class="right2">
                    <img src="./img/01.webp" alt="">
                    <p>电动按摩椅</p></div>
                    <span>10</span>
                    <button>-</button>
                    <span>1</span>
                    <button>+</button>
                    <span>删除收藏</span>
            </div> -->
        <!-- </div> -->
    </div>
    </div>
</body>
<script>
    var oBanxin=document.querySelector(".banxin")
    var oLeft=document.querySelector(".left")
    var oRight=document.querySelector(".right")
    var oSmallbox=document.querySelector(".smallbox")
    var oImg=document.querySelector("img")
    var oSpan=document.querySelector("span")
    var oChe=document.querySelector(".che")
    var oRight1=document.querySelector(".right1")
    var oShop=document.querySelector(".shop")
    var oBtn=document.querySelector(".btn")
    var oRight2=document.querySelector(".right2")
    var oEn=document.querySelector(".en")

    //设置数据的代码
function setData(key,value){
    localStorage.setItem(key,JSON.stringify(value))
}

// 获取数据的代码
function getData(key){
    var data = localStorage.getItem(key);//根据key取出key对应的值
    // 如果有数据，就把它转为数组或者对象
    if (data) {
        return JSON.parse(data)
    } else { // 如果没有有数据，就把它转为空
        return []
    }
}
var jsonarr = [
        { id: 1001, "product": "高级办公椅", "price": "10000", "num": 2 ,img:"./img/06.webp"},
        { id: 1002, "product": "高级按摩椅", "price": "1000", "num": 3 ,img:"./img/07.webp"},
        { id: 1003, "product": "高级电动按摩椅", "price": "100", "num": 1,img:"./img/04.webp" },
        { id: 1004, "product": "电动按摩椅", "price": "10", "num": 1 ,img:"./img/05.webp"},
        { id: 1005, "product": "老板椅", "price": "20000", "num": 1 ,img:"./img/05.webp"},
        { id: 1006, "product": "办公桌", "price": "50000", "num": 1 ,img:"./img/06.webp"},
        { id: 1007, "product": "可升降办公椅", "price": "2000", "num": 1 ,img:"./img/07.webp"},
        { id: 1008, "product": "可升降办公桌", "price": "5000", "num": 1,img:"./img/08.webp" },
    ]
//左边的渲染
    function render(jsonarr){
        // let data=getData("cart")

        var str=''
        jsonarr.forEach(item=>{
            str+=`
            <div class="smallbox">
            <img src="${item.img}" alt=""><br>
            <span>${item.product}</span><br>
            <span>${item.price}</span><br>
            <span id="che" >加入购物车</span><br>
        </div>
        `
        })
        oLeft.innerHTML=str

        
    }
    render(jsonarr)



    //点击事件
    oLeft.onclick=function(e){
        if(e.target.classname=='che'){
            let arr=getData("card")
            let id=e.target.dataset.id
            console.log(id)
            let goods=arr.find(item=>item.id==id)
            console.log(goods)

        }

    }




//右边渲染


// function render2(jsonarr){
//         // let data=getData("cart")

//         var str=''
//         jsonarr.forEach(item=>{
//             str+=`
//             <div class="right1">
//             <button></button>
//             <div class="right2">
//                 <img src="./img/01.webp" alt="">
//                 <p>${item.product}</p></div>
//                 <span>${item.price}</span>
//                 <button>-</button>
//                 <span>${item.num}</span>
//                 <button>+</button>
//                 <span>删除收藏</span>
//         </div>`
//         })
//         oRight.innerHTML=str

        
//     }
//     render2(jsonarr)

        
</script>
</html>